<template>
    <div v-if="this.form.nickname" class="charts-box">
        <!-- 表1 -->
        <h3 class="title1">我的收藏类别表</h3>
        <qiun-vue-ucharts type="rose" :opts="opts1" @click="changedTouches" :chartData="chartData1" />

        <!-- 表2 -->
        <h3 class="title2">我的收藏点赞排行</h3>
        <qiun-vue-ucharts type="bubble" :opts="opts2" :chartData="chartData2" />

    </div>
    <van-empty v-else description="请先去我的页面登录哦" style="margin-left: 20px;"></van-empty>
</template>

<script>
import qiunVueUcharts from '@qiun/vue-ucharts'
import httpApi from '@/http';
export default {
    components: {
        qiunVueUcharts
    },
    data() {
        return {
            //请求的参数数据
            form: {

            },
            user: '',

            //请求到的结果数据

            chartData1: {},
            chartData2: {},

            opts1: {
                color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [0, 0, 0, 0],
                enableScroll: false,
                legend: {
                    show: true,
                    position: "left",
                    lineHeight: 25
                },
                extra: {
                    rose: {
                        type: "radius",
                        minRadius: 100,
                        activeOpacity: 0.6,
                        activeRadius: 10,
                        offsetAngle: -90,
                        labelWidth: 20,
                        border: true,
                        borderWidth: 2,
                        borderColor: "#FFFFFF",
                        linearType: "custom",

                    }
                }
            },
            opts2: {
                color: ["#29d2e4", "#fcc29a", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
                padding: [15, 15, 0, 15],
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: false,
                    gridType: "dash",
                    splitNumber: 5,
                    boundaryGap: "justify",
                    min: 50,
                    max: 1000
                },
                yAxis: {
                    disableGrid: false,
                    gridType: "dash",
                    data: [
                        {
                            min: 0,
                            max: 150,
                        }
                    ]
                },
                extra: {
                    bubble: {
                        border: 2,
                        opacity: 0.5
                    }
                }
            },





        }
    },
    methods: {
        changedTouches() {
            console.log(111);
        }
    },
    mounted() {
        this.form = this.$store.state.user
        console.log('显示当前状态是否有表单信息', this.form);
        if (this.form == null) {
            //提示用户先登录
            this.$toast.fail('登录后才有收藏详情展示')
            //显示empty页面提示
            //DONE
            return

        } else {
            let user = this.form.username
            let params1 = { user }
            // 表1 ：查询用户收藏数量 分类别返回
            httpApi.yinshiApi.query_collectCount(params1).then(res => {
                console.log(res);
                var moviecount = res.data.moviecount
                // console.log(moviecount);
                var dianshicount = res.data.dianshicount
                // console.log(dianshicount); 
                var dongmancount = res.data.dongmancount
                // console.log(dongmancount);
                let array1 = {
                    series: [
                        {
                            data: [{ "name": "电影", "value": moviecount }, { "name": "电视剧", "value": dianshicount }, { "name": "动漫", "value": dongmancount }],

                        }
                    ]
                }

                // console.log(array1.series[0].data[0].value);
                // console.log(array1.series[0].data[1].value);
                // console.log(array1.series[0].data[2].value);
                // for(let index = 0; index <3 ; index++){
                //     console.log(array1.series[0].data[index].value);

                // }
                if (array1.series[0].data[0].value == 0 && array1.series[0].data[1].value == 0 && array1.series[0].data[3].value == 0) {
                    return
                }

                //修改饼图数据为0的bug

                this.chartData1 = JSON.parse(JSON.stringify(array1));
            })

            //表2 ：查询用户收藏信息 点赞数量最高的前5名 显示在气泡图中
            let current_page = 1
            //page查询页数 pagesize设置的每页页数 此处写死
            let params2 = { user, page: current_page, pagesize: 80 }
            httpApi.userApi.search_collects(params2).then(res => {
                // 请求到的收藏数据
                console.log(res);
                this.usercollects = res.data.data
                // console.log(this.usercollects[0]);

                // 定义一个数组变量用来存储排名前五的信息
                let topFive = [];

                //for循环数组下标 比较循环数组中的dz_count值，比大小
                for (let i = 0; i <= this.usercollects.length - 1; i++) {
                    // console.log(this.usercollects[i]);
                    // console.log(this.usercollects[i].dz_count); //每条收藏数据中的点赞数量
                    topFive.push({
                        data: this.usercollects[i],
                        dz_count: this.usercollects[i].dz_count
                    });
                }
                // 对 topFive 数组进行排序，以找到排名前四的信息
                topFive.sort((a, b) => b.dz_count - a.dz_count);

                // 取出排名前五的信息
                let topFiveInfo = topFive.slice(0, 4);
                console.log(topFiveInfo);
                console.log(topFiveInfo[0].data.name);

                let array2 = {
                    series: [
                        {
                            name: "气泡一",
                            data: [
                                [topFiveInfo[3].dz_count, 65, 42, topFiveInfo[3].data.name],

                                [topFiveInfo[2].dz_count, 120, 55, topFiveInfo[2].data.name]
                            ]
                        },
                        {
                            name: "气泡二", //x轴 y轴 泡泡大小 泡泡名称
                            data: [
                                [topFiveInfo[1].dz_count, 50, 65, topFiveInfo[1].data.name],

                                [topFiveInfo[0].dz_count, 100, 85, topFiveInfo[0].data.name]
                            ]
                        }

                    ]
                }
                this.chartData2 = JSON.parse(JSON.stringify(array2));

            })

        }
    }
}
</script>

<style scoped lang="scss">


.charts-box {
    position: relative;
    // width:350px;
    width: 100%;

    height: 350px;

    .title1 {
        position: absolute;
        top: 8%;
        right: 50%;
        transform: translateX(50%);

        color: #8d93ab;

    }

    .title2 {
        position: absolute;
        top: 90%;
        right: 50%;
        transform: translateX(50%);
        color: #8d93ab;
        text-align: center;
    }

    // 样式穿透 修改表的flex主轴方向
    ::v-deep .chartsview {
        flex-direction: row;
    }
}
</style>